import { useGameStore } from '../store/gameStore';
import { ChessUnitType } from '../types/game';
import { Coins, Zap, Shield, Sword, Target, Clock } from 'lucide-react';

// 单位配置数据
const unitConfigs = {
  soldier: {
    name: '锐士',
    description: '近战单位，过河后攻速提升',
    cost: 50,
    health: 100,
    attackPower: 20,
    attackRange: 1,
    attackSpeed: 1000,
    specialAbility: '五兵同心：过河后攻击速度提升50%',
    deploymentRule: '可部署在己方半区任意位置'
  },
  cannon: {
    name: '神射',
    description: '远程范围攻击，需要炮架',
    cost: 80,
    health: 80,
    attackPower: 40,
    attackRange: 3,
    attackSpeed: 2000,
    specialAbility: '炮架攻击：必须隔着单位才能攻击，造成范围伤害',
    deploymentRule: '需要有其他单位作为炮架'
  },
  horse: {
    name: '骠骑',
    description: '突击攻击，马踏连营',
    cost: 100,
    health: 120,
    attackPower: 35,
    attackRange: 2,
    attackSpeed: 1500,
    specialAbility: '马踏连营：攻击目标及其身后直线上的敌人',
    deploymentRule: '只能部署在"日"字格位置'
  },
  chariot: {
    name: '战车',
    description: '直线穿透攻击',
    cost: 120,
    health: 150,
    attackPower: 50,
    attackRange: 4,
    attackSpeed: 1200,
    specialAbility: '车辚辚：攻击整条直线上的所有敌人',
    deploymentRule: '可部署在任意位置，攻击直线范围'
  },
  advisor: {
    name: '谋士',
    description: '减速光环效果',
    cost: 70,
    health: 60,
    attackPower: 10,
    attackRange: 2,
    attackSpeed: 3000,
    specialAbility: '运筹帷幄：减缓范围内敌人移动速度',
    deploymentRule: '只能部署在"九宫格"附近'
  },
  minister: {
    name: '丞相',
    description: '治疗和增益光环',
    cost: 150,
    health: 200,
    attackPower: 15,
    attackRange: 3,
    attackSpeed: 2500,
    specialAbility: '仁德布天下：为友军提供治疗和攻击力加成',
    deploymentRule: '只能部署在"田"字格中心'
  },
  general: {
    name: '元帅',
    description: '终极单位，全面增益',
    cost: 300,
    health: 300,
    attackPower: 80,
    attackRange: 3,
    attackSpeed: 800,
    specialAbility: '号令天下：大幅提升周围所有友军的攻击力和攻击速度',
    deploymentRule: '只能部署在"九宫"之内'
  }
};

export default function UnitPanel() {
  const { gameState, currentLevel, selectUnit } = useGameStore();

  // 获取可用的单位类型
  const availableUnits = currentLevel?.allowedUnits || [];

  // 处理单位选择
  const handleUnitSelect = (unitType: ChessUnitType) => {
    if (gameState.chessSpirit >= unitConfigs[unitType].cost) {
      selectUnit(gameState.selectedUnit === unitType ? undefined : unitType);
    }
  };

  // 渲染单位卡片
  const renderUnitCard = (unitType: ChessUnitType) => {
    const config = unitConfigs[unitType];
    const isSelected = gameState.selectedUnit === unitType;
    const canAfford = gameState.chessSpirit >= config.cost;
    const isAvailable = availableUnits.includes(unitType);

    if (!isAvailable) return null;

    return (
      <div
        key={unitType}
        className={`relative p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
          isSelected
            ? 'border-amber-500 bg-amber-100 shadow-lg transform scale-105'
            : canAfford
            ? 'border-amber-300 bg-amber-50 hover:border-amber-400 hover:bg-amber-100'
            : 'border-gray-300 bg-gray-100 opacity-50 cursor-not-allowed'
        }`}
        onClick={() => canAfford && handleUnitSelect(unitType)}
      >
        {/* 单位图标和名称 */}
        <div className="flex items-center gap-3 mb-3">
          <div className={`w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-lg ${
            getUnitColorClass(unitType)
          }`}>
            {getUnitText(unitType)}
          </div>
          <div>
            <h3 className="font-bold text-amber-900">{config.name}</h3>
            <p className="text-xs text-amber-700">{config.description}</p>
          </div>
        </div>

        {/* 单位属性 */}
        <div className="grid grid-cols-2 gap-2 mb-3 text-xs">
          <div className="flex items-center gap-1 text-amber-800">
            <Coins className="w-3 h-3" />
            <span>{config.cost}</span>
          </div>
          <div className="flex items-center gap-1 text-red-600">
            <Shield className="w-3 h-3" />
            <span>{config.health}</span>
          </div>
          <div className="flex items-center gap-1 text-orange-600">
            <Sword className="w-3 h-3" />
            <span>{config.attackPower}</span>
          </div>
          <div className="flex items-center gap-1 text-blue-600">
            <Target className="w-3 h-3" />
            <span>{config.attackRange}</span>
          </div>
        </div>

        {/* 攻击速度 */}
        <div className="flex items-center gap-1 text-xs text-purple-600 mb-2">
          <Clock className="w-3 h-3" />
          <span>{(config.attackSpeed / 1000).toFixed(1)}s</span>
        </div>

        {/* 特殊能力 */}
        <div className="mb-2">
          <div className="flex items-center gap-1 text-xs font-medium text-amber-800 mb-1">
            <Zap className="w-3 h-3" />
            <span>特殊能力</span>
          </div>
          <p className="text-xs text-amber-700 leading-tight">
            {config.specialAbility}
          </p>
        </div>

        {/* 部署规则 */}
        <div>
          <p className="text-xs text-gray-600 leading-tight">
            <span className="font-medium">部署规则：</span>
            {config.deploymentRule}
          </p>
        </div>

        {/* 选中指示器 */}
        {isSelected && (
          <div className="absolute -top-1 -right-1 w-6 h-6 bg-amber-500 rounded-full flex items-center justify-center">
            <span className="text-white text-xs font-bold">✓</span>
          </div>
        )}

        {/* 资源不足提示 */}
        {!canAfford && (
          <div className="absolute inset-0 bg-gray-500 bg-opacity-50 rounded-lg flex items-center justify-center">
            <span className="text-white text-xs font-bold">棋魂不足</span>
          </div>
        )}
      </div>
    );
  };

  // 获取单位颜色类
  const getUnitColorClass = (type: ChessUnitType): string => {
    const colors = {
      soldier: 'bg-amber-600',
      cannon: 'bg-red-600',
      horse: 'bg-green-600',
      chariot: 'bg-purple-600',
      advisor: 'bg-cyan-600',
      minister: 'bg-orange-600',
      general: 'bg-yellow-500'
    };
    return colors[type];
  };

  // 获取单位文字
  const getUnitText = (type: ChessUnitType): string => {
    const texts = {
      soldier: '兵',
      cannon: '炮',
      horse: '马',
      chariot: '车',
      advisor: '士',
      minister: '相',
      general: '将'
    };
    return texts[type];
  };

  return (
    <div className="h-full flex flex-col">
      {/* 面板标题 */}
      <div className="p-4 border-b border-amber-600/30">
        <h2 className="text-xl font-bold text-amber-900 text-center">
          棋手单位
        </h2>
        <p className="text-sm text-amber-700 text-center mt-1">
          点击选择单位进行部署
        </p>
      </div>

      {/* 单位列表 */}
      <div className="flex-1 p-4 overflow-y-auto space-y-4">
        {(Object.keys(unitConfigs) as ChessUnitType[]).map(unitType => 
          renderUnitCard(unitType)
        )}
      </div>

      {/* 快捷键提示 */}
      <div className="p-4 border-t border-amber-600/30 bg-amber-50/50">
        <h3 className="text-sm font-bold text-amber-900 mb-2">快捷键</h3>
        <div className="grid grid-cols-2 gap-1 text-xs text-amber-700">
          <div>1 - 锐士</div>
          <div>2 - 神射</div>
          <div>3 - 骠骑</div>
          <div>4 - 战车</div>
          <div>5 - 谋士</div>
          <div>6 - 丞相</div>
          <div>7 - 元帅</div>
          <div className="col-span-2 mt-1 pt-1 border-t border-amber-300">
            ESC - 取消选择
          </div>
        </div>
      </div>
    </div>
  );
}